<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <view class="header">
            <view class="back-button" @click="goBack">
                <text class="back-icon">←</text>
            </view>
            <text class="header-title">爱心捐赠</text>
        </view>

        <!-- 主要内容区域 -->
        <view class="content">
            <!-- 顶部介绍 -->
            <view class="intro-section">
<<<<<<< HEAD
                <image class="intro-image" src="/static/donation-banner.png" mode="aspectFill"></image>
                <view class="intro-overlay2">
=======
                <image class="intro-image" src="/static/donation-banner.jpg" mode="aspectFill"></image>
                <view class="intro-overlay">
>>>>>>> 73359ff (更新头像)
                    <text class="intro-title">爱心捐赠</text>
                    <text class="intro-desc">您的一份爱心，可以点亮一个生命</text>
                </view>
            </view>

            <!-- 捐赠方式 -->
            <!-- <view class="donation-methods">
                <view class="method-item" v-for="(method, index) in donationMethods" :key="index"
                    @click="selectMethod(method.type)">
                    <view class="method-icon-container" :style="{ background: method.bgColor }">
                        <text class="method-icon">{{ method.icon }}</text>
                    </view>
                    <text class="method-name">{{ method.name }}</text>
                </view>
            </view> -->

            <!-- 紧急救助 -->
            <!-- <view class="emergency-section">
                <view class="section-title">
                    <text class="title-text">紧急救助</text>
                    <text class="more-text"
                        @click="navigateTo('/pages/storylibrary/activity/donation/emergency')">查看全部</text>
                </view>

                <swiper class="emergency-swiper" circular autoplay interval="4000" duration="500">
                    <swiper-item v-for="(item, index) in emergencyProjects" :key="index">
                        <view class="emergency-card" @click="navigateToDetail(item.id, 'emergency')">
                            <image class="emergency-image" :src="item.image" mode="aspectFill"></image>
                            <view class="emergency-info">
                                <view class="emergency-header">
                                    <text class="emergency-tag">紧急</text>
                                    <text class="emergency-title">{{ item.title }}</text>
                                </view>
                                <view class="progress-bar">
                                    <view class="progress-inner" :style="{ width: item.progress + '%' }"></view>
                                </view>
                                <view class="emergency-stats">
                                    <text class="stats-text">已筹: {{ item.raised }}元</text>
                                    <text class="stats-text">目标: {{ item.target }}元</text>
                                </view>
                                <text class="emergency-btn">立即捐助</text>
                            </view>
                        </view>
                    </swiper-item>
                </swiper>
            </view> -->

            <!-- 捐赠项目 -->
<<<<<<< HEAD
            <view class="section-title list-title">
                <text class="title-text">捐赠项目</text>
                <view class="filter-container">
                    <picker mode="selector" :range="categoryOptions" @change="handleCategoryChange">
                        <!-- <view class="filter-button">
                            <text class="filter-text">{{ currentCategory }}</text>
                            <text class="filter-icon">▼</text>
                        </view> -->
                    </picker>
                </view>
            </view>
=======
            <!-- <view class="section-title">
                <text class="title-text">捐赠项目</text>
                <view class="filter-container">
                    <picker mode="selector" :range="categoryOptions" @change="handleCategoryChange">
                        <view class="filter-button">
                            <text class="filter-text">{{ currentCategory }}</text>
                            <text class="filter-icon">▼</text>
                        </view>
                    </picker>
                </view>
            </view> -->
>>>>>>> 73359ff (更新头像)

            <!-- <view class="project-list">
                <view class="project-item" v-for="(project, index) in donationProjects" :key="index"
                    @click="navigateToDetail(project.id, 'project')">
                    <image class="project-image" :src="project.image" mode="aspectFill"></image>
                    <view class="project-info">
                        <text class="project-title">{{ project.title }}</text>
                        <text class="project-org">{{ project.organization }}</text>
                        <view class="progress-container">
                            <view class="progress-bar">
                                <view class="progress-inner" :style="{ width: project.progress + '%' }"></view>
                            </view>
                            <view class="progress-text">
                                <text>{{ project.progress }}%</text>
                                <text>{{ project.donors }}人捐赠</text>
                            </view>
                        </view>
                        <view class="project-footer">
                            <text class="project-amount">已筹: {{ project.raised }}元</text>
                            <text class="donate-btn">捐赠</text>
                        </view>
                    </view>
                </view>
            </view> -->

<<<<<<< HEAD
            <div class="no-charity-org">
                <span class="title-text1">暂无捐赠项目</span>
            </div>

            <!-- 捐赠机构 -->
            <view class="section-title  list-title">
                <text class="title-text">合作机构</text>
                
                <!-- <text class="more-text"
                    @click="navigateTo('/pages/storylibrary/activity/organization/index')">查看全部</text> -->
            </view>

            <!-- <view class="org-list">
=======
            <!-- 捐赠机构 -->
            <!-- <view class="section-title">
                <text class="title-text">合作机构</text>
                <text class="more-text"
                    @click="navigateTo('/pages/storylibrary/activity/organization/index')">查看全部</text>
            </view>

            <view class="org-list">
>>>>>>> 73359ff (更新头像)
                <view class="org-item" v-for="(org, index) in organizations" :key="index"
                    @click="navigateToOrg(org.id)">
                    <image class="org-logo" :src="org.logo" mode="aspectFit"></image>
                    <text class="org-name">{{ org.name }}</text>
                </view>
            </view> -->

<<<<<<< HEAD
            <div class="no-charity-org">
                <span class="title-text1">暂无合作机构</span>
            </div>
=======
            <view style="display: flex; justify-content: center; align-items: center; height: 100px; color: #999; font-size: 14px;">
                <text class="title-text">暂无捐赠</text>
            </view>
>>>>>>> 73359ff (更新头像)
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            donationMethods: [
                { type: 'money', name: '资金捐赠', icon: '💰', bgColor: 'linear-gradient(135deg, #FFD3A5 0%, #FD6585 100%)' },
                { type: 'goods', name: '物资捐赠', icon: '📦', bgColor: 'linear-gradient(135deg, #A1C4FD 0%, #C2E9FB 100%)' },
                { type: 'time', name: '时间捐赠', icon: '⏰', bgColor: 'linear-gradient(135deg, #81FBB8 0%, #28C76F 100%)' },
                { type: 'monthly', name: '月捐计划', icon: '📅', bgColor: 'linear-gradient(135deg, #E0C3FC 0%, #8EC5FC 100%)' }
            ],
            emergencyProjects: [
                {
                    id: 1,
                    title: '山区儿童紧急医疗救助',
                    image: '/static/emergency-medical.jpg',
                    raised: 25800,
                    target: 50000,
                    progress: 51
                },
                {
                    id: 2,
                    title: '洪灾地区生活物资援助',
                    image: '/static/emergency-flood.jpg',
                    raised: 68500,
                    target: 100000,
                    progress: 68
                },
                {
                    id: 3,
                    title: '贫困学生助学金',
                    image: '/static/emergency-education.jpg',
                    raised: 12600,
                    target: 30000,
                    progress: 42
                }
            ],
            categoryOptions: ['全部项目', '儿童关爱', '教育支持', '医疗救助', '环境保护'],
            currentCategory: '全部项目',
            donationProjects: [
                {
                    id: 1,
                    title: '山区儿童教育计划',
                    organization: '希望工程',
                    image: '/static/project-education.jpg',
                    raised: 156800,
                    progress: 78,
                    donors: 1245
                },
                {
                    id: 2,
                    title: '关爱留守儿童',
                    organization: '中国儿童基金会',
                    image: '/static/project-children.jpg',
                    raised: 89500,
                    progress: 45,
                    donors: 876
                },
                {
                    id: 3,
                    title: '老年人医疗援助',
                    organization: '仁爱医疗基金',
                    image: '/static/project-elderly.jpg',
                    raised: 210300,
                    progress: 84,
                    donors: 1532
                },
                {
                    id: 4,
                    title: '环保植树计划',
                    organization: '绿色中国',
                    image: '/static/project-environment.jpg',
                    raised: 65200,
                    progress: 32,
                    donors: 543
                }
            ],
            organizations: [
                { id: 1, name: '中国红十字会', logo: '/static/org-redcross.png' },
                { id: 2, name: '希望工程', logo: '/static/org-hope.png' },
                { id: 3, name: '联合国儿童基金会', logo: '/static/org-unicef.png' },
                { id: 4, name: '壹基金', logo: '/static/org-one.png' },
                { id: 5, name: '中国扶贫基金会', logo: '/static/org-poverty.png' }
            ]
        };
    },
    methods: {
        goBack() {
            uni.navigateBack();
        },
        navigateTo(url) {
            uni.navigateTo({
                url: url
            });
        },
        navigateToDetail(id, type) {
            uni.navigateTo({
                url: `/pages/storylibrary/activity/donation/detail?id=${id}&type=${type}`
            });
        },
        navigateToOrg(id) {
            uni.navigateTo({
                url: `/pages/storylibrary/activity/organization/detail?id=${id}`
            });
        },
        selectMethod(type) {
            uni.showToast({
                title: `已选择${type}捐赠方式`,
                icon: 'none'
            });
            // 实际应用中这里应该跳转到对应的捐赠页面
        },
        handleCategoryChange(e) {
            const index = e.detail.value;
            this.currentCategory = this.categoryOptions[index];
            // 实际应用中这里应该根据分类筛选数据
        }
    }
};
</script>

<style>
.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f5f5f5;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 90rpx;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.back-button {
    position: absolute;
    left: 30rpx;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-icon {
    font-size: 40rpx;
    color: #333333;
}

.header-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333333;
}

.content {
    margin-top: 90rpx;
    padding-bottom: 50rpx;
}

.intro-section {
    position: relative;
    width: 100%;
    height: 350rpx;
}

.intro-image {
    width: 100%;
    height: 100%;
}

<<<<<<< HEAD
.intro-overlay2 {
=======
.intro-overlay {
>>>>>>> 73359ff (更新头像)
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
<<<<<<< HEAD
    background: linear-gradient(to bottom, rgb(216, 133, 133), rgba(241, 238, 238, 0.144));
=======
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6));
>>>>>>> 73359ff (更新头像)
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 30rpx;
}

.intro-title {
    font-size: 48rpx;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 10rpx;
}

.intro-desc {
    font-size: 28rpx;
    color: #ffffff;
    opacity: 0.9;
}

.donation-methods {
    display: flex;
    justify-content: space-between;
    padding: 30rpx;
    background-color: #ffffff;
    border-radius: 20rpx;
    margin: -50rpx 20rpx 30rpx;
    position: relative;
    z-index: 10;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.method-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 22%;
}

.method-icon-container {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10rpx;
}

.method-icon {
    font-size: 40rpx;
}

.method-name {
    font-size: 24rpx;
    color: #666666;
    text-align: center;
}

.section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 30rpx 20rpx;
}

.title-text {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
}

.more-text {
    font-size: 24rpx;
    color: #666666;
}

.emergency-section {
    background-color: #ffffff;
    margin-bottom: 20rpx;
    padding-bottom: 20rpx;
}

.emergency-swiper {
    height: 300rpx;
    padding: 0 20rpx;
}

.emergency-card {
    display: flex;
    height: 100%;
    background-color: #ffffff;
    border-radius: 15rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.emergency-image {
    width: 40%;
    height: 100%;
}

.emergency-info {
    flex: 1;
    padding: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.emergency-header {
    margin-bottom: 15rpx;
}

.emergency-tag {
    display: inline-block;
    font-size: 20rpx;
    color: #ffffff;
    background-color: #FF0000;
    padding: 4rpx 10rpx;
    border-radius: 6rpx;
    margin-right: 10rpx;
}

.emergency-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333333;
}

.progress-bar {
    height: 10rpx;
    background-color: #f0f0f0;
    border-radius: 5rpx;
    overflow: hidden;
    margin-bottom: 10rpx;
}

.progress-inner {
    height: 100%;
    background: linear-gradient(to right, #ff9a9e, #fad0c4);
}

.emergency-stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15rpx;
}

.stats-text {
    font-size: 22rpx;
    color: #666666;
}

.emergency-btn {
    align-self: center;
    font-size: 26rpx;
    color: #ffffff;
    background-color: #FF0000;
    padding: 10rpx 30rpx;
    border-radius: 30rpx;
    text-align: center;
}

.filter-container {
    display: flex;
}

.filter-button {
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    padding: 8rpx 20rpx;
    border-radius: 30rpx;
}

.filter-text {
    font-size: 24rpx;
    color: #666666;
    margin-right: 10rpx;
}

.filter-icon {
    font-size: 20rpx;
    color: #999999;
}

.project-list {
    padding: 0 20rpx;
}

.project-item {
    display: flex;
    background-color: #ffffff;
    border-radius: 15rpx;
    margin-bottom: 20rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.project-image {
    width: 200rpx;
    height: 200rpx;
    flex-shrink: 0;
}

.project-info {
    flex: 1;
    padding: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.project-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 8rpx;
}

.project-org {
    font-size: 24rpx;
    color: #666666;
    margin-bottom: 15rpx;
}

.progress-container {
    margin-bottom: 15rpx;
}

.progress-text {
    display: flex;
    justify-content: space-between;
    font-size: 22rpx;
    color: #999999;
    margin-top: 8rpx;
}

.project-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.project-amount {
    font-size: 24rpx;
    color: #FF0000;
    font-weight: bold;
}

.donate-btn {
    font-size: 26rpx;
    color: #ffffff;
    background-color: #FF0000;
    padding: 8rpx 20rpx;
    border-radius: 30rpx;
}

.org-list {
    display: flex;
    flex-wrap: wrap;
    padding: 0 10rpx 20rpx;
    background-color: #ffffff;
}

.org-item {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx 10rpx;
}

.org-logo {
    width: 80rpx;
    height: 80rpx;
    border-radius: 10rpx;
    margin-bottom: 10rpx;
}

.org-name {
    font-size: 22rpx;
    color: #666666;
    text-align: center;
}
<<<<<<< HEAD

.no-charity-org {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    color: #6a6060;
    font-size: 14px;
}

.title-text1 {
    color: #c7c7c7;
    font-size: 14px;
}

.list-title {
    background-color: #ffffff;
    margin-bottom: 0;
    border-bottom: 1rpx solid #f0f0f0;
}
=======
>>>>>>> 73359ff (更新头像)
</style>

